<template>
    <div>
        <div>
            <div class="block-container">
                <div class="block">

                    <el-form ref="searchForm" :model="searchForm" label-width="80px" >
                        <div class="top-div">
                            <el-form-item label="合同号:">
                                <el-input v-model="searchForm.barCode"></el-input>
                            </el-form-item>
                            <el-form-item label="零售商:">
                                <el-input v-model="searchForm.retailerName"></el-input>
                            </el-form-item>
                            <el-form-item label="类型" >
                                <el-select v-model="searchForm.type" placeholder="全部">
                                    <el-option label="省外" value="0"></el-option>
                                    <el-option label="省内" value="1"></el-option>
                                </el-select>
                            </el-form-item>

                            <el-date-picker
                                    v-model="dateValue"
                                    type="datetimerange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    style="margin-left: 20px"
                            />
                            <div style="display: flex;justify-content: space-between">
                                <el-form-item>
                                    <el-button type="primary" @click="onSubmit">搜索</el-button>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="addComdit">添加</el-button>
                                </el-form-item>
                            </div>


                        </div>
                        <div class="btn-wrap">

                        </div>

                    </el-form>
                </div>

                <div class="block-bottom">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage4"
                            :page-sizes="[5, 10, 20, 30]"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="totalNum">
                    </el-pagination>
                </div>
            </div>

            <div class="table-box">
                <el-table
                        :data="pageData"
                        border
                        style="width: 100%">
                    <el-table-column
                            fixed
                            align="center"
                            type="index"
                            label="序号"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="barCode"
                            align="center"
                            label="合同编号"
                            width="300">
                        <template slot-scope="scope">
                            <div  @click="changePath(scope.row.contractId)" style="color: orangered">
                                {{scope.row.barCode}}
                            </div>
                        </template>

                    </el-table-column>
                    <el-table-column
                            prop="retailerName"
                            align="center"
                            label="零售商"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="type"
                            align="center"
                            label="类型"
                            width="100">
                    </el-table-column>

                    <el-table-column
                            prop="createTime"
                            align="center"
                            label="创建日期"
                            width="350">
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            align="center"
                            label="操作"
                            width="200">
                        <template slot-scope="scope">
                            <el-button @click="editCommit(scope.row,scope.$index)" type="text" size="small">编辑</el-button>
                            <el-button type="text" size="small" @click="deleteContract(scope.row.contractId)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <!--查看或编辑对话框-->
            <el-dialog
                    title="修改信息"
                    :visible.sync="dialogVisible"
                    width="30%"
                    :before-close="handleClose">
                <div>
                    <el-form ref="comditDataForm" :model="rowData" label-width="80px" :rules="rules">
                        <el-form-item label="水果名称" prop="name">
                            <el-input v-model="rowData.name"></el-input>
                        </el-form-item>
                        <el-form-item label="价格" prop="price">
                            <el-input v-model="rowData.price"></el-input>
                        </el-form-item>
                        <el-form-item label="产地" prop="address">
                            <el-input v-model="rowData.locality"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitEdit">确 定</el-button>
            </span>
            </el-dialog>
            <!--添加对话框-->
            <el-dialog
                    title="添加信息"
                    :visible.sync="addVisible"
                    width="60%"
                    :before-close="handleClose">
                <div>
                    <el-form ref="addFruitsForm" :model="addData" label-width="100px">
                        <el-form-item label="合同编码" prop="name">
                            <el-input placeholder="系统自动生成" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="类型" >
                            <el-select v-model="addData.type" placeholder="全部">
                                <el-option label="省外" value="0"></el-option>
                                <el-option label="省内" value="1"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="零售商信息" class="right-div">
                            <el-input
                                    style="width: 140px;margin-right: 10px"
                                    v-model="retailerName"
                                    placeholder="查询名字"
                                    @blur="selectRetailer"
                                    prefix-icon="el-icon-search"/>
                            <el-select v-model="selectedRetailer" placeholder="请选择零售商" style="width: 180px">
                                <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <div>
                            <el-descriptions  v-show="selectedRetailer.name" :column="1"  border>
                                <el-descriptions-item>
                                   <template slot="label">
                                    <i class="el-icon-user"></i>
                                        用户名
                                    </template>
                                    {{selectedRetailer.name}}
                                </el-descriptions-item>
                                <el-descriptions-item >
                                    <template slot="label">
                                        <i class="el-icon-mobile-phone"></i>
                                        手机号
                                    </template>
                                    {{selectedRetailer.telephone}}
                                </el-descriptions-item>
                                <el-descriptions-item>
                                    <template slot="label">
                                    <i class="el-icon-location-outline"></i>
                                         居住地
                                    </template>
                                    {{selectedRetailer.address}}
                                </el-descriptions-item>

                            </el-descriptions>
                        </div>
                        <el-form-item label="货物信息" class="right-div">
                            <el-button type="primary" style="width:130px" @click="showFruits">关联</el-button>
                        </el-form-item>

                        <div>

                            <el-table
                                    v-show="showComditsTable"
                                    border
                                    :data="multipleSelection"
                                    style="width: 100%">
                                <el-table-column
                                        align="center"
                                        prop="name"
                                        label="名称"
                                        width="100">
                                </el-table-column>
                                <el-table-column
                                        align="center"
                                        prop="price"
                                        label="价格"
                                        width="100">
                                </el-table-column>
                                <el-table-column
                                        align="center"
                                        prop="locality"
                                        width="200"
                                        label="产地">
                                </el-table-column>
                                <el-table-column
                                        align="center"
                                        prop="accessoryList"
                                        width="210"
                                        label="附属品">
                                    <template slot-scope="scope">
                                        <div v-if="scope.row.accessoryList.length > 0">
                                            <div v-for="(item,index) in scope.row.accessoryList" :key="index">
                                                {{item.name }}: {{  item.price}}元
                                            </div>
                                        </div>
                                        <div v-else>
                                            暂无附属品
                                        </div>

                                    </template>
                                </el-table-column>
                                <el-table-column
                                        align="center"
                                        prop="number"
                                        width="248"
                                        label="数量">
                                    <template slot-scope="scope">
                                        <el-input-number v-model="scope.row.number" :precision="2" :step="1" :max="100"></el-input-number>
<!--                                        <el-input v-model="scope.row.number" style="width=20px"/>-->
                                    </template>

                                </el-table-column>
                            </el-table>
                        </div>
                    </el-form>
                </div>
                <span slot="footer" class="dialog-footer">
                <el-button @click="addVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitAdd">确 定</el-button>
            </span>
            </el-dialog>
            <!--右边弹窗-->
            <el-drawer
                    size="40%"
                    title="水果列表"
                    :visible.sync="drawer"
                    :with-header="true">
                <div>
                    <el-form label-width="80px" style="display: flex;justify-content: center">
                        <el-form-item style="margin-right: 20px">
                            <el-input v-model="fruitName"></el-input>
                        </el-form-item>
                        <el-button type="primary" style="height: 40px" @click="selectFruits">查询</el-button>
                    </el-form>
                    <div style="width:80%;margin:0 auto">
                        <template>
                            <el-table
                                    fit
                                    @selection-change="handleSelectionChange"
                                    border
                                    :data="commditsData"
                                    style="width: 100%">
                                <el-table-column
                                        align="center"
                                        type="selection"
                                        width="56"/>
                                <el-table-column
                                        align="center"
                                        prop="name"
                                        label="名称"
                                        width="110">
                                </el-table-column>
                                <el-table-column
                                        align="center"
                                        prop="price"
                                        label="价格"
                                        width="110">
                                </el-table-column>
                                <el-table-column
                                        align="center"
                                        prop="locality"
                                        width="200"
                                        label="产地">
                                </el-table-column>
                            </el-table>
                        </template>
                    </div>
                </div>
                <div style="width: 80%;margin: 0 auto">
                    <el-button type="primary" style="width: 100%;margin-top: 20px" @click="okSelect">确定</el-button>
                </div>

            </el-drawer>



        </div>
    </div>
</template>

<script>
    import {
        addFruits,
        deleteFruits,
        editFruits,
        getAllContract,
        getAllContractCount,
        getAllRetailer,
        getAllCommdits,
        createContract, deleteContract
    } from "../api/require";
    import qs from 'qs'

    export default {
        name: "ContractModel",
        data() {
            return {
                searchForm:{
                    startPage:'0',
                    pageSize:'10',
                },
                addData:{
                    name:'',
                    price:'',
                    locality:''
                },
                totalNum:10,
                currentPage4: 1,//当前页码
                dateValue: '',//查询日期
                pageData:[],//数据
                dialogVisible: false,//对话框的显示
                rowData:{},
                rules: {
                    name: [{ required: true, message: '请输入水果名称', trigger: 'blur' }],
                    price: [{ required: true, message: '请输价格', trigger: 'blur' }],
                    locality: [{ required: true, message: '请输入产地', trigger: 'blur' }],
                },
                dataIndex:0,//操作的行数
                addVisible:false,//tianjia
                options: [],//名字的下拉框数据
              value: '',
                retailerName:'',
                selectedRetailer:"",
                drawer:false,
                fruitName:'',
                commditsData:[],//货物信息
                multipleSelection:[],
                showComditsTable:false,

            };
        },
        created() {
            this.getAllContracts();
            this.getNums()
            this.getAllRetailer()
        },
        methods:{
            changePath(id){
                this.$router.push({path:`/main/biao/${id}`})
            },
            submitAdd(){
                console.log(this.multipleSelection)
               const  addData ={
                    type:this.addData.type,
                   retailerId:this.selectedRetailer.value,
                   commoditiesVos:this.multipleSelection
                }
                const data = qs.stringify(addData)
                createContract(addData).then(res=>{
                    if (res.data.code === 200){
                        this.$message({message:"添加成功",type:'success'});
                        // this.getNums()
                        // this.getAllContracts()
                    }else{
                        this.$message({message:"添加失败",type:'success'})
                    }
                    // this.resetAddForm()
                    this.addVisible = false;
                })



            },
            okSelect(){
               this.showComditsTable=true
                this.drawer = false
            },

            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            showFruits(){
                this.drawer=true;
                this.getCommdits()

            },
            selectFruits(){
              this.getCommdits()
                this.fruitName = ""
            },
            getCommdits(){
                getAllCommdits(this.fruitName).then(res=>{
                    console.log("大喊大叫杀杀杀",res);
                    this.commditsData=res.data.obj
                })
            },
            //查询供应商
            selectRetailer(){
                this.getAllRetailer()
            },
            //获取所有的供应商
            getAllRetailer(){
                getAllRetailer(this.retailerName).then(res=>{
                    this.options = res.data.obj.map(item=>{
                        return {
                            value:item.retailerId,
                            label:item.name,
                            name:item.name,
                            telephone:item.telephone,
                            address:item.address
                        }
                    })

                }).catch(_=>{})
            },
            //天加
            addComdit(){
                this.addVisible = true;
            },

            /**删除*/
            deleteContract(id){
                this.$confirm("确定删除？").then(res=>{
                    /*删除*/
                    console.log('删除')
                    deleteContract(id).then(res=>{
                        if (res.data.code === 200){
                            this.$message({message:"删除成功",type:'success'})
                            this.getNums();
                            this.getAllContracts();
                        }else{
                            this.$message({message:"删除失败",type:"error"})
                        }
                    }).catch(_=>{
                        this.$message({message:"系统有误",type:"error"})
                    })
                }).catch(_=>{})
            },
            getAllContracts(){
                getAllContract(this.searchForm).then(res=>{
                    console.log(res)
                    res.data.obj.forEach(item=>{
                        if (item.type===0){
                            item.type='省内'
                        }else{
                            item.type = "省外"
                        }
                    })
                    this.pageData = res.data.obj
                }).catch(_=>{
                    this.$message({message:"系统错误",type:'error'})
                })
            },
            //获取页码
            getNums(){
                getAllContractCount(this.searchForm).then(res=>{
                    console.log("查询数据",res)
                    this.totalNum = res.data.obj
                }).catch(err=>{
                    this.$message({message:'系统错误'})
                })
            },
            onSubmit(){
                this.searchForm.startTime=this.dateValue ? this.dateValue[0] : ''
                this.searchForm.endTime=this.dateValue ? this.dateValue[1] : ''
                console.log(this.searchForm);
                // this.searchForm.startPage = 0
                this.getNums();
                this.getAllContracts();
                this.resetForm()

            },
            handleSizeChange(val) {

                this.searchForm.pageSize = val
                this.getAllContracts();
            },
            handleCurrentChange(val) {

                this.searchForm.startPage = val-1
                this.getAllContracts();
            },
            //编辑水果
            editRetailer(row,index) {
                console.log("用户信息",row,index);
                // this.dialogVisible = true;
                // this.rowData = row;
                // this.dataIndex = index;

            },
            resetForm(){
                this.searchForm= {
                    startPage: '0',
                    pageSize: '10',
                }
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            //修改
            editCommit(row,index){
                console.log("水果信息",row)
                this.dialogVisible = true;
                this.rowData = row;
                this.dataIndex = index;

            },
            submitEdit(){

                this.$refs.comditDataForm.validate((valid)=>{
                    if (valid){
                        editFruits(this.rowData).then(res=>{
                            console.log("修改返回的消息",res)
                            if (res.data.code === 200){
                                this.$message({message:"修改成功",type:'success'});
                                this.$set(this.pageData[this.dataIndex],this.rowData)
                            }else{
                                this.$message({message:"修改失败",type:'success'})
                            }
                            this.rowData = {}
                            this.dialogVisible = false;
                        }).catch(err=>{
                            this.$message({message:"系统错误",type:"error"})
                        })
                    }else{
                        this.$message({message:"数据格式有误",type:'error'});
                    }
                })
            },
            //添加用户
            resetAddForm(){
                this.addData={
                    name:'',
                    price:'',
                    locality:''
                }
            },


        }
    }
</script>

<style scoped lang="scss">
    .block{
        position: relative;
        top: -10px;

    }
    .top-div{
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
    .two_div{
        width: 70%;
        display: flex;
        justify-content: space-between;

    }
    .block-bottom{
        position: absolute;
        bottom: 10px;
        left: 18%;
    }
    .table-box{
        height: 530px;
        background: orange;
        overflow: auto;

    }
    .right-div{
        display: flex;
        /*justify-content: space-between;*/
    }
</style>
